<template>
  <div class="progress-work" v-loading="loading">
    <div class="search d-between top-search">
      <div class="d-start">
        <div class="d-center" style="margin-right:10px">
          <el-button
            size="medium"
            type="info"
            @click="search()"
            icon="el-icon-refresh"
            style="width:36px;height:36px;padding:0;"
          ></el-button>
        </div>
        <div class="title" style="margin-right:10px;min-width:120px;">
          <el-dropdown trigger="click">
            <div
              class="btn d-center"
              style="background:#F5F7FA;color:#909399;font-size:14px;height:36px;"
            >
              查看图例
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </div>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="d-start">
                <PatternsSmall :iconShow="1" style="margin-right:10px;" />完成
              </el-dropdown-item>
              <el-dropdown-item class="d-start">
                <PatternsSmall :iconShow="2" style="margin-right:10px;" />超时未完成
              </el-dropdown-item>
              <el-dropdown-item class="d-start">
                <PatternsSmall :iconShow="3" style="margin-right:10px;" />尚未完成
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="d-center" style="margin-right:10px">
          <el-button
            size="medium"
            type="info"
            plain
            @click="exportExcel"
            v-if="tableData.length"
          >导出Excel</el-button>
        </div>
      </div>

      <!-- <div class="d-start"></div> -->
      <div class="d-end">
        <div class="input d-center">
          <!-- <span>项目名称：</span> -->
          <el-input class="inline-input" v-model="name" placeholder="请输入内容" size="medium">
            <template slot="prepend">项目名称：</template>
          </el-input>
        </div>
        <!-- <div class="input d-center">
        <span>项目状态：</span>
        <el-select size="medium" v-model="active" placeholder="请选择">
          <el-option value="1">新建</el-option>
          <el-option value="2">续建</el-option>
          <el-option value="3">交工</el-option>
          <el-option value="4">竣工</el-option>
        </el-select>
        </div>-->
        <div class="input d-center">
          <span class="select-gray d-center" style="width:100px;">项目状态：</span>
          <el-select size="medium" v-model="active" placeholder="请选择">
            <el-option value="未开工">未开工</el-option>
            <el-option value="新建">新建</el-option>
            <el-option value="续建">续建</el-option>
            <el-option value="交工">交工</el-option>
            <el-option value="竣工">竣工</el-option>
          </el-select>
        </div>
        <div class="d-center" style="margin-left:10px;">
          <el-button size="medium" type="info" plain @click="page = 1;search()">搜索</el-button>
          <!-- icon="el-icon-search"
          style="width:36px;height:36px;padding:0;"-->
        </div>
        <div class="d-center" style="margin-left:10px;">
          <el-button
            size="medium"
            type="info"
            plain
            @click="page = 1;name = '';active = '';search()"
          >重置</el-button>
        </div>
      </div>
    </div>

    <div class="main">
      <el-table :data="tableData" style="width: 100%;" height="100%" v-if="!loading">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + 1+((page-1)*10)}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="xmmc" label="项目名称" show-overflow-tooltip width="100" align="center"></el-table-column>
        <el-table-column prop="qq_kxxyj" label="可行性研究" width="100" align="center">
          <template slot-scope="scope">
            <PatternsSmall
              @click.native="handleClick(scope,1)"
              :iconShow="verification(scope.row.qq_kxxyj)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="qq_cbsj" label="初步设计" width="100" align="center">
          <template slot-scope="scope">
            <PatternsSmall
              @click.native="handleClick(scope,2)"
              :iconShow="verification(scope.row.qq_cbsj)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="qq_sgtsj" label="施工图设计" width="100" align="center">
          <template slot-scope="scope">
            <PatternsSmall
              @click.native="handleClick(scope,3)"
              :iconShow="verification(scope.row.qq_sgtsj)"
            />
          </template>
        </el-table-column>
        <el-table-column label="要件办理" align="center">
          <el-table-column label="土地" width="100" align="center">
            <el-table-column
              prop="qq_yjblids"
              :label="item.values"
              width="100"
              align="center"
              v-for="item in resdata.coding?resdata.coding[0].children:[]"
              :key="item.id"
            >
              <template slot-scope="scope">
                <PatternsSmall
                  @click.native="handleClick(scope,4,item.keys)"
                  :iconShow="scope.row.qq_yjblids[item.keys]?1:3"
                />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="林地" width="100" align="center">
            <el-table-column
              prop="qq_yjblids"
              :label="item.values"
              width="100"
              align="center"
              v-for="item in resdata.coding?resdata.coding[1].children:[]"
              :key="item.id"
            >
              <template slot-scope="scope">
                <PatternsSmall
                  @click.native="handleClick(scope,4,item.keys)"
                  :iconShow="scope.row.qq_yjblids[item.keys]?1:3"
                />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="qq_yjblids"
            :label="item.values"
            width="100"
            align="center"
            v-for="item in resdata.codes"
            :key="item.id"
          >
            <template slot-scope="scope">
              <PatternsSmall
                @click.native="handleClick(scope,4)"
                :iconShow="scope.row.qq_yjblids[item.keys]?1:3"
              />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="qq_bdgl" label="招标" width="100" align="center">
          <template slot-scope="scope">
            <span @click="handleClick(scope,5)">{{scope.row.qq_bdgl}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="技术服务单位" width="120" align="center">
          <template slot-scope="scope">
            <PatternsSmall
              @click.native="handleClick(scope,6)"
              :iconShow="verification(scope.row.qq_jsfwdw)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="date" label="第三方检测" width="100" align="center">
          <template slot-scope="scope">
            <PatternsSmall
              @click.native="handleClick(scope,7)"
              :iconShow="verification(scope.row.qq_dsfjc)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="qq_htgl" label="合同签订" width="100" align="center">
          <template slot-scope="scope">
            <span @click="handleClick(scope,8)">{{scope.row.qq_htgl}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="施工许可" width="100" align="center">
          <template slot-scope="scope">
            <PatternsSmall
              @click.native="handleClick(scope,9)"
              :iconShow="verification(scope.row.qq_sgxk)"
            />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="date" label="施工进场" width="100" align="center">
          <template slot-scope="scope">
            <PatternsSmall :iconShow="verification(scope.row.qq_kxxyj)" />
          </template>
        </el-table-column>-->

        <el-table-column label="操作" fixed="right" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="primary"
              plain
              @click="edit(scope.row)"
              v-if="scope.row.is_sealed == 1"
            >编辑</el-button>
            <el-button
              size="medium"
              type="primary"
              plain
              @click="edit(scope.row)"
              v-if="scope.row.is_sealed == 2"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      class="d-center"
      style="margin-top:10px"
      :page-size="pageSize"
      :current-page="page"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <el-dialog
      title="详情"
      :visible.sync="dialogFormVisible"
      @close="close"
      width="80%"
      :destroy-on-close="true"
    >
      <ADetailsStudy v-if="dialogIsShow == 1" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></ADetailsStudy>
      <BDesign v-if="dialogIsShow == 2" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></BDesign>
      <CPlans v-if="dialogIsShow == 3" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></CPlans>
      <DRequirements
        v-if="dialogIsShow == 4"
        :xm_id="xm_id"
        :xmmc="xmmc"
        :is_sealed="'2'"
        :label="label"
      ></DRequirements>
      <ELot v-if="dialogIsShow == 5" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></ELot>
      <FService v-if="dialogIsShow == 6" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></FService>
      <GParty v-if="dialogIsShow == 7" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></GParty>
      <HContract v-if="dialogIsShow == 8" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></HContract>
      <!-- <IPermit v-if="dialogIsShow == 9" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></IPermit> -->
      <JTechnology v-if="dialogIsShow == 9" :xm_id="xm_id" :xmmc="xmmc" :is_sealed="'2'"></JTechnology>
    </el-dialog>
  </div>
</template>

<script>
import PatternsSmall from "@/components/patternsSmall";
import autocomplete from "@/mixins/autocomplete";
import ADetailsStudy from "./dialogIndex/ADetailsStudy";
import BDesign from "./dialogIndex/BDesign";
import CPlans from "./dialogIndex/CPlans";
import DRequirements from "./dialogIndex/DRequirements";
import ELot from "./dialogIndex/ELot";
import FService from "./dialogIndex/FService";
import GParty from "./dialogIndex/GParty";
import HContract from "./dialogIndex/HContract";
// import IPermit from "./dialogIndex/IPermit";
import JTechnology from "./dialogIndex/JTechnology";
export default {
  mixins: [autocomplete],

  components: {
    PatternsSmall,
    ADetailsStudy,
    BDesign,
    CPlans,
    DRequirements,
    ELot,
    FService,
    GParty,
    HContract,
    // IPermit,
    JTechnology,
  },
  data() {
    return {
      name: "",
      active: "",
      dialogFormVisible: false,
      tableData: [],
      selectData: [],
      item: {},
      resdata: {},
      lookOrEdit: 1, // 1为新增 2为编辑 3为查看
      total: 0,
      pageSize: 10,
      page: 1,
      loading: false,
      xmmc: "",
      xm_id: "",
      dialogIsShow: 0,
      label: "", //标段的名称 用于筛选
    };
  },
  methods: {
    close() {
      setTimeout(() => {
        this.dialogIsShow = 0;
      }, 200);
      this.label = "";
    },
    handleClick(scope, num, labelTrue = false) {
      this.xm_id = scope.row.id;
      this.xmmc = scope.row.xmmc;
      if (scope.column.property == "qq_yjblids") {
        this.label = scope.column.label;
        if (labelTrue) {
          this.label = labelTrue;
        }
      }
      // console.log(this.label);
      this.dialogIsShow = num;
      setTimeout(() => {
        this.dialogFormVisible = true;
      }, 200);
    },
    handleCurrentChange(value) {
      this.page = value;
      this.search();
    },
    edit(item) {
      window.localStorage.query = JSON.stringify({
        xm_id: item.id,
        xmmc: item.xmmc,
        xmzt: item.xmzt,
        is_sealed: item.is_sealed,
      });
      this.$nextTick(() => {
        // let path = path
        this.$router.push({
          path: "/progress/DetailWork/ADetailsStudy",
          query: {
            xm_id: item.id,
            xmmc: item.xmmc,
            xmzt: item.xmzt,
            is_sealed: item.is_sealed,
          },
        });
      });
    },
    search() {
      this.loading = true;
      this.$get("/api/Qq/index", {
        xmmc: this.name,
        xmzt: this.active,
        page: this.page,
      }).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          let province = {
            id: 12331,
            keys: "林地",
            values: "林地",
            children: [],
          };
          let country = {
            id: 1000,
            keys: "土地",
            values: "土地",
            children: [],
          };
          res.data.coding = [];
          res.data.coding.unshift(province);
          res.data.coding.unshift(country);
          res.data.codes.forEach((v, index) => {
            if (/(林地|土地)/i.test(v.keys)) {
              if (/土地.*国家级.*/i.test(v.keys)) {
                v.values = "国家级";
                res.data.coding[0].children.push(v);
                res.data.codes.splice(index, 1);
              }
              if (/土地.*省级.*/i.test(v.keys)) {
                v.values = "省级";
                res.data.coding[0].children.push(v);
                res.data.codes.splice(index, 1);
              }
            }
          });
          res.data.codes.forEach((v, index) => {
            if (/(林地|土地)/i.test(v.keys)) {
              if (/林地.*国家级.*/i.test(v.keys)) {
                v.values = "国家级";
                res.data.coding[1].children.push(v);
                res.data.codes.splice(index, 1);
              }
              if (/林地.*省级.*/i.test(v.keys)) {
                v.values = "省级";
                res.data.coding[1].children.push(v);
                res.data.codes.splice(index, 1);
              }
            }
          });
          this.resdata = res.data;
          this.tableData = res.data.list;
        }
        this.loading = false;
      });
    },
    exportExcel() {
      let userId = window.localStorage.userid;
      window.open(
        `${this.$updata}/api/Qq/exports?xmmc=${this.name}&xmzt=${this.active}&userid=${userId}`
      );
    },
    verification(item) {
      item.toString();
      if (item.toString() == "green") {
        return 1;
      }
      if (item.toString() == "red") {
        return 2;
      }
      if (item.toString() == "white") {
        return 3;
      }
      if (item.toString() == "true") {
        return 4;
      }
      if (item.toString() == "false") {
        return 5;
      }
    },
  },
  mounted() {
    this.search();
  },
};
</script>

<style scoped lang="less">
.progress-work {
  width: 100%;
  height: calc(100%);
  background: #ffffff;
  padding: 10px;
  border-radius: 5px;
  .search {
    width: 100%;
    height: 60px;
    padding: 10px 0;
    position: relative;
    .input {
      width: 300px;
      margin-right: 10px;
      span {
        flex-shrink: 0;
      }
    }
  }
  .main {
    height: calc(100% - 110px);
    border: 1px solid #ccc;
    span {
      display: inline-block !important;
      width: 100% !important;
    }
    .title {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        margin-left: 10px;
        font: 16px bold;
        color: #909399;
      }
    }
  }
}
.btn {
  padding: 6px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
</style>